<template>
  <p v-if="!endDate">--</p>
  <p v-else>
    <span v-if="remainingTime < 0"> 已超时</span>
    <span>{{ setTimeStr() }}</span>
  </p>
</template>

<script lang="ts" setup>
  import dayjs from 'dayjs'
  import { ref, onMounted } from 'vue'
  onMounted(() => {
    if (props.endDate) {
      setTimeStr()
    }
  })
  const remainingTime = ref()
  const props = defineProps({
    endDate: {
      type: [String, Number],
    },
  })
  function setTimeStr() {
    const endT = dayjs(props.endDate)
    const startT = dayjs()
    remainingTime.value = dayjs(endT).diff(startT)
    let days = Math.floor(remainingTime.value / 86400000)
    let hours = Math.floor((remainingTime.value % 86400000) / 3600000)
    return `${days}天${hours}小时`
  }
</script>
